<template>
  <div class="email-editor">
    <!-- 顶部操作按钮 -->
    <div class="editor-toolbar">
      <button class="tool-button" @click="sendEmail">
        <i class="iconfont icon-fasong"></i>
        <span>发送</span>
      </button>
      <button class="tool-button">
        <i class="iconfont icon-cunchu"></i>
        <span>存草稿</span>
      </button>
      <button class="tool-button">
        <i class="iconfont icon-chehui"></i>
        <span>撤销</span>
      </button>
    </div>

    <!-- 邮件表单 -->
    <div class="email-form">
      <!-- 收件人 -->
      <div class="form-row">
        <span class="form-label">收件人</span>
        <div class="form-input-container">
          <input
            v-model="email.recipients"
            type="text"
            class="form-input"
            placeholder="多个收件人用分号 ; 分隔"
          >
        </div>
      </div>

      <!-- 抄送/密送 -->
      <div class="form-row" v-if="showCcBcc">
        <span class="form-label">
          <span class="cc-bcc-toggle" @click="toggleCcBcc">
            {{ showFullCcBcc ? '收起' : '添加抄送/密送' }}
          </span>
        </span>
        <div class="form-input-container" v-if="showFullCcBcc">
          <div class="cc-bcc-row">
            <span class="cc-bcc-label">抄送</span>
            <input v-model="email.cc" type="text" class="form-input">
          </div>
          <div class="cc-bcc-row">
            <span class="cc-bcc-label">密送</span>
            <input v-model="email.bcc" type="text" class="form-input">
          </div>
        </div>
      </div>

      <!-- 主题 -->
      <div class="form-row">
        <span class="form-label">主题</span>
        <div class="form-input-container">
          <input v-model="email.subject" type="text" class="form-input">
        </div>
      </div>

      <!-- 附件区域 -->
      <div class="form-row" v-if="email.attachments.length > 0">
        <span class="form-label">附件</span>
        <div class="attachments-container">
          <div v-for="(file, index) in email.attachments" :key="index" class="attachment-item">
            <i class="iconfont icon-wenjian"></i>
            <span class="file-name">{{ file.name }}</span>
            <span class="file-size">({{ formatFileSize(file.size) }})</span>
            <i class="iconfont icon-shanchu delete-icon" @click="removeAttachment(index)"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 富文本编辑器 -->
    <div class="editor-container">
      <textarea
        v-if="!useRichText"
        v-model="email.content"
        class="plain-text-editor"
        placeholder="请输入邮件正文"
      ></textarea>
      <div v-else class="rich-text-toolbar">
        <!-- 这里可以添加富文本工具栏 -->
        <button class="format-button" @click="toggleBold">
          <i class="iconfont icon-zitijiacu"></i>
        </button>
        <button class="format-button" @click="toggleItalic">
          <i class="iconfont icon-zitixieti"></i>
        </button>
        <!-- 更多格式按钮... -->
      </div>
      <div
        v-if="useRichText"
        class="rich-text-editor"
        contenteditable="true"
        @input="updateContent"
        ref="editor"
      ></div>
    </div>

    <!-- 底部操作栏 -->
    <div class="editor-footer">
      <button class="footer-button" @click="toggleEditorMode">
        <i class="iconfont" :class="useRichText ? 'icon-wenben' : 'icon-fuwenben'"></i>
        <span>{{ useRichText ? '纯文本' : '富文本' }}</span>
      </button>
      <label class="footer-button attachment-button">
        <input type="file" multiple @change="handleFileUpload" style="display: none;">
        <i class="iconfont icon-fujian"></i>
        <span>添加附件</span>
      </label>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

// 邮件数据
const email = reactive({
  recipients: '',
  cc: '',
  bcc: '',
  subject: '',
  content: '',
  attachments: [],
  isRichText: false
})

// UI状态
const showCcBcc = ref(false)
const showFullCcBcc = ref(false)
const useRichText = ref(true)
const editor = ref(null)

// 切换抄送/密送显示
const toggleCcBcc = () => {
  showCcBcc.value = true
  showFullCcBcc.value = !showFullCcBcc.value
}

// 切换编辑器模式
const toggleEditorMode = () => {
  useRichText.value = !useRichText.value
}

// 处理文件上传
const handleFileUpload = (event) => {
  const files = Array.from(event.target.files)
  files.forEach(file => {
    email.attachments.push({
      name: file.name,
      size: file.size,
      file: file
    })
  })
  event.target.value = '' // 重置input，允许重复选择相同文件
}

// 删除附件
const removeAttachment = (index) => {
  email.attachments.splice(index, 1)
}

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 更新富文本内容
const updateContent = () => {
  if (editor.value) {
    email.content = editor.value.innerHTML
  }
}

// 发送邮件
const sendEmail = () => {
  console.log('发送邮件:', email)
  // 这里添加实际发送逻辑
}

// 富文本操作
const toggleBold = () => {
  document.execCommand('bold', false, null)
}

const toggleItalic = () => {
  document.execCommand('italic', false, null)
}

// 初始化编辑器内容
onMounted(() => {
  if (editor.value) {
    editor.value.innerHTML = email.content
  }
})
</script>

<style scoped lang="scss">
.email-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.editor-toolbar {
  display: flex;
  padding: 8px 16px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e8e8e8;
}

.tool-button {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  margin-right: 8px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;

  .iconfont {
    margin-right: 4px;
    font-size: 14px;
  }

  &:hover {
    background-color: #40a9ff;
  }
}

.email-form {
  padding: 0 16px;
}

.form-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.form-label {
  width: 80px;
  font-size: 14px;
  color: #666;
  padding: 8px 0;
}

.cc-bcc-toggle {
  color: #1890ff;
  cursor: pointer;
  font-size: 13px;

  &:hover {
    text-decoration: underline;
  }
}

.cc-bcc-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.cc-bcc-label {
  width: 40px;
  font-size: 13px;
  color: #666;
}

.form-input-container {
  flex: 1;
}

.form-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 8px 0;

  &::placeholder {
    color: #bfbfbf;
  }
}

.attachments-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.attachment-item {
  display: flex;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;

  .icon-wenjian {
    color: #1890ff;
    margin-right: 8px;
  }

  .file-name {
    margin-right: 4px;
    color: #333;
  }

  .file-size {
    color: #999;
    margin-right: 12px;
  }

  .delete-icon {
    color: #999;
    cursor: pointer;

    &:hover {
      color: #ff4d4f;
    }
  }
}

.editor-container {
  flex: 1;
  padding: 0 16px;
  overflow-y: auto;
}

.plain-text-editor {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none;
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 0;
  font-family: inherit;
}

.rich-text-toolbar {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.format-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  margin-right: 4px;
  color: #666;

  &:hover {
    background-color: #f0f0f0;
  }
}

.rich-text-editor {
  width: 100%;
  height: calc(100% - 40px);
  outline: none;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 0;
}

.editor-footer {
  display: flex;
  padding: 8px 16px;
  background-color: #f5f5f5;
  border-top: 1px solid #e8e8e8;
}

.footer-button {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  margin-right: 16px;
  padding: 4px 8px;

  .iconfont {
    margin-right: 4px;
    font-size: 14px;
  }

  &:hover {
    color: #1890ff;
  }
}

.attachment-button {
  cursor: pointer;
}
</style>
